<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<style media="screen">
	.el-card-box .el-card-header {
		position: relative;
		overflow: hidden;
	}
	.el-card-box .el-card-header h4 {
		margin: 0;padding: 0;line-height: 32px;
	}
	.el-card-box .el-card-header .el-button {
		position: absolute;
		right: 0;
		top: 0;
	}
	.el-card {
		margin-bottom: 15px;
	}
	.el-card-body{
		overflow: auto;
	}
	.el-popover .el-form-item{
		margin-bottom: 0;
	}
	#main .lost_rate {
		background-color: #fdf6ec;
		color: #e6a23c;
	}
	#main .lost_rate_on_week {
		background-color: #f0f9eb;
		color: #67c23a;
	}
	#main .col-danger{
		color: #f56c6c;
    background: #fef0f0;
	}
	#main .el-card-box .el-card-header .el-date-editor{
		width: 150px;position: absolute;right: 0;top: 0;
	}
	#main .el-card-box .el-card-header .el-date-editor .el-input__inner{
		line-height: 32px;height: 32px;
	}
	#main .el-card-box .el-card-header .el-date-editor .el-input__icon{
		line-height: 32px;
	}
</style>
<div id="main">
	<el-row :gutter="15">
		<el-col :md="12">
			<el-row :gutter="15">
				<el-col :md="24">
					<el-card class="el-card-box">
						<div slot="header" class="el-card-header">
							<h4 align="left">班级追踪</h4>
							<el-button type="primary" size="small" v-popover:popover0>添 加</el-button>
						</div>
						<div class="el-card-body">
							<el-table :data="trackTableData" empty-text="请添加数据">
								<el-table-column align="center" sortable
									label="班级" prop="name">
								</el-table-column>
								<el-table-column align="center" sortable
								 	label="班段" prop="level">
							 	</el-table-column>
								<el-table-column align="center" sortable
									label="开班段" prop="start">
								</el-table-column>
								<el-table-column align="center" sortable
									label="阶段" prop="stage">
								</el-table-column>
								<el-table-column align="center" sortable
									label="班主任" prop="teacher">
								</el-table-column>
								<el-table-column align="center">
									<template slot-scope="scope">
										<el-button type="danger" size="mini"
											@click="delRow(scope.row,'Track')">
											删除
										</el-button>
									</template>
								</el-table-column>
							</el-table>
							<p align="center" style="padding:5px;">
								<el-button type="primary" @click="toTrack">追 踪</el-button>
							</p>
						</div>
					</el-card>
				</el-col>
			</el-row>
			<el-row :gutter="15">
				<el-col :md="24">
					<el-card class="el-card-box">
						<div slot="header" class="el-card-header">
							<h4 align="left">班级对比</h4>
							<el-button type="primary" size="small" v-popover:popover1>添 加</el-button>
						</div>
						<div class="el-card-body">
							<el-table :data="contrastTableData" empty-text="请添加数据">
								<el-table-column align="center" sortable
									label="班级" prop="name">
								</el-table-column>
								<el-table-column align="center" sortable
								 	label="班段" prop="level">
							 	</el-table-column>
								<el-table-column align="center" sortable
									label="开班段" prop="start">
								</el-table-column>
								<el-table-column align="center" sortable
									label="阶段" prop="stage">
								</el-table-column>
								<el-table-column align="center" sortable
									label="班主任" prop="teacher">
								</el-table-column>
								<el-table-column align="center">
									<template slot-scope="scope">
										<el-button type="danger" size="mini"
											@click="delRow(scope.row,'Contrast')">
											删除
										</el-button>
									</template>
								</el-table-column>
							</el-table>
							<p align="center" style="padding:5px;">
								<el-button type="primary" @click="toContrast">对 比</el-button>
							</p>
						</div>
					</el-card>
				</el-col>
			</el-row>
		</el-col>
		<el-col :md="12">
			<el-card class="el-card-box">
				<div slot="header" class="el-card-header">
					<h4 align="left">班级情况</h4>
					<a href="/admin/regulate/report?week={{$Week-3}}">
						<el-button type="text">第{{$Week-3}}周的德育情况报表已出，点击查看</el-button>
					</a>
				</div>
				<div class="el-card-body">
					<el-table :data="situationTableData.table" v-loading="situationTableData.loading" :span-method="situationRowspan" border>
						<el-table-column align="right" label=" " prop="col">
						</el-table-column>
						<el-table-column align="left" label="昨天" prop="yesterday">
					 	</el-table-column>
						<el-table-column align="left" label="今天" prop="today">
						</el-table-column>
					</el-table>
				</div>
			</el-card>
		</el-col>
	</el-row>
	<el-row :gutter="15">
		<el-col :md="24">
			<el-card class="el-card-box">
				<div slot="header" class="el-card-header">
					<h4 align="center">周流失情况</h4>
					<a href="/admin/report_loss">
						<el-button type="primary" size="small">查看流失报表</el-button>
					</a>
				</div>
				<div class="el-card-body">
					<el-table :data="weekLossTableData" border>
						<el-table-column align="center" label="" width="70" prop="week">
						</el-table-column>
						<el-table-column align="center" label="一段班">
							<el-table-column align="center" label="总人数" prop="total_1">
							</el-table-column>
							<el-table-column align="center" label="流失人数" prop="lost_1">
							</el-table-column>
							<el-table-column align="center" label="流失率" prop="rate_1" class-name="lost_rate">
							</el-table-column>
							<el-table-column align="center" label="同周占比" prop="rate_1_week" class-name="lost_rate_on_week">
							</el-table-column>
						</el-table-column>
						<el-table-column align="center" label="二段班" class-name="stage_2">
							<el-table-column align="center" label="总人数" prop="total_2">
							</el-table-column>
							<el-table-column align="center" label="流失人数" prop="lost_2">
							</el-table-column>
							<el-table-column align="center" label="流失率" prop="rate_2" class-name="lost_rate">
							</el-table-column>
							<el-table-column align="center" label="同周占比" prop="rate_2_week" class-name="lost_rate_on_week">
							</el-table-column>
						</el-table-column>
					</el-table>
				</div>
			</el-card>
		</el-col>
	</el-row>
	<el-row :gutter="15">
		<el-col :md="24">
			<el-card class="el-card-box">
				<div slot="header" class="el-card-header">
					<h4 align="center">日流失情况</h4>
					<el-date-picker v-model="todayLossTableData.date" type="date" value-format="yyyy-MM-dd" @change="handlePickerChange">
			    	</el-date-picker>
				</div>
				<div class="el-card-body">
					<el-table :data="todayLossTableData.table" border v-loading="todayLossTableData.loading">
						<el-table-column align="center" label="班主任" prop="tutor">
						</el-table-column>
						<el-table-column align="center" label=" " prop="squad_id">
						</el-table-column>
						<el-table-column align="center" label="班级" prop="squad_name">
						</el-table-column>
						<el-table-column align="center" label="年份" prop="year">
						</el-table-column>
						<el-table-column align="center" label="月份" prop="month">
						</el-table-column>
						<el-table-column align="center" label="单词课老师" prop="teacher_1">
						</el-table-column>
						<el-table-column align="center" label="语境课老师" prop="teacher_2">
						</el-table-column>
						<el-table-column align="center" label="应用课老师" prop="teacher_3">
						</el-table-column>
						<el-table-column align="center" label="写作课老师" prop="teacher_4">
						</el-table-column>
						<el-table-column align="center" label="阅读课老师" prop="teacher_6">
						</el-table-column>
						<el-table-column align="center" label="人数" prop="total" class-name="col-danger">
						</el-table-column>
						<el-table-column align="center" label="流失人数" prop="lost" class-name="col-danger">
						</el-table-column>
						<el-table-column align="center" label="详情" prop="what" class-name="col-danger">
							<template slot-scope="scope">
								<el-popover placement="right" trigger="click">
									<el-button size="mini" type="danger" plain
										@click="showTodayLoss(scope.row)" slot="reference">
										展开
									</el-button>
									<el-table :data="todayLossDetailsTable.table" size="mini"
										v-loading="todayLossDetailsTable.loading">
										<el-table-column align="center"
											label="流失时间" prop="sp_time">
										</el-table-column>
										<el-table-column align="center"
										 	label="流失周" prop="week">
									 	</el-table-column>
										<el-table-column align="center" width="300"
											label="流失章节" prop="study_jindu">
										</el-table-column>
										<el-table-column align="center"
											label="学员姓名" prop="st_name">
										</el-table-column>
										<el-table-column align="center" width="300"
											label="原因" prop="memo">
										</el-table-column>
									</el-table>
								</el-popover>
							</template>
						</el-table-column>
					</el-table>
					<el-pagination
						align="right"
						@size-change="pageSizeChange"
						@current-change="curPageChange"
						:current-page="todayLossTableData.pageNumber"
						:page-sizes="[10, 25, 50]"
						:page-size="todayLossTableData.pageSize"
						layout="total, sizes, prev, pager, next, jumper"
						:total="todayLossTableData.total">
					</el-pagination>
				</div>
			</el-card>
		</el-col>
	</el-row>
	<el-row :gutter="15">
		<el-col :md="12">
			<el-card class="el-card-box">
				<div slot="header" class="el-card-header">
					<h4 align="center">咨询总览</h4>
				</div>
				<div class="el-card-body">
					<h5 align="center">功能暂未开放</h5>
				</div>
			</el-card>
		</el-col>
		<el-col :md="12">
			<el-card class="el-card-box">
				<div slot="header" class="el-card-header">
					<h4 align="center">图书馆</h4>
				</div>
				<div class="el-card-body">
					<h5 align="center">功能暂未开放</h5>
				</div>
			</el-card>
		</el-col>
	</el-row>
	<!-- popover:班级追踪 -->
	<el-popover ref="popover0" placement="bottom" trigger="click" v-model="show_add_track">
		<el-form ref="popoverForm" :model="popoverForm" label-width="60px">
			<el-form-item label="开班段">
				<el-date-picker style="width:171px;" @change="getInitData"
					v-model="popoverForm.year" align="right" type="year"
					placeholder="开班年份" clearable size="small" value-format="yyyy">
				</el-date-picker>
			</el-form-item>
			<el-form-item label="校区">
				<el-select size="small" filterable v-model="popoverForm.campuses"
				 	@change="getInitData" placeholder="请选择">
					<el-option v-for="opt in initData.campuses" :label="opt.name" :key="opt.id" :value="opt.id">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="班型">
				<el-select size="small" filterable v-model="popoverForm.class_type"
					@change="getInitData" placeholder="请选择">
					<el-option v-for="opt in initData.class_type"
						:label="opt.name" :key="opt.id" :value="opt.id">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="班段">
				<el-select size="small" filterable v-model="popoverForm.class_stage"
				 	@change="getInitData" placeholder="请选择">
					<el-option v-for="(opt,key) in initData.class_stage" :label="opt" :key="key" :value="key">
					</el-option>
				</el-select>
			</el-form-item>

			<el-form-item label="分组">
				<el-select size="small" @change="getInitData"
					filterable v-model="popoverForm.class_group" placeholder="请选择">
					<el-option v-for="opt in initData.class_group"
						:label="opt.name" :key="opt.id" :value="opt.id">
					</el-option>
				</el-select>
			</el-form-item>

			<el-form-item label="班号">
				<el-select size="small" :disabled="initLoading"
					filterable v-model="popoverForm.classes" placeholder="请选择">
					<el-option v-for="opt in initData.classes" :label="opt.name" :key="opt.id" :value="opt.id"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label=" ">
				<el-button type="primary" size="small" @click="addTrackRow">
					确定
				</el-button>
				<el-button size="small" @click="show_add_track = false;">
					取消
				</el-button>
			</el-form-item>
		</el-form>
	</el-popover>
	<!-- popover:班级对比 -->
	<el-popover ref="popover1" placement="bottom" trigger="click" v-model="show_add_contrast">
		<el-form ref="popoverForm" :model="popoverForm" label-width="60px">
			<el-form-item label="开班段">
				<el-date-picker style="width:171px;" @change="getInitData"
					v-model="popoverForm.year" align="right" type="year"
					placeholder="开班年份" clearable size="small" value-format="yyyy">
				</el-date-picker>
			</el-form-item>
			<el-form-item label="校区">
				<el-select size="small" @change="getInitData" filterable v-model="popoverForm.campuses" placeholder="请选择">
					<el-option v-for="opt in initData.campuses"
						:label="opt.name" :key="opt.id" :value="opt.id">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="班型">
				<el-select size="small" @change="getInitData" filterable v-model="popoverForm.class_type" placeholder="请选择">
					<el-option v-for="opt in initData.class_type"
						:label="opt.name" :key="opt.id" :value="opt.id">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="班段">
				<el-select size="small" filterable v-model="popoverForm.class_stage"
				 	@change="getInitData" placeholder="请选择">
					<el-option v-for="(opt,key) in initData.class_stage" :label="opt" :key="key" :value="key">
					</el-option>
				</el-select>
			</el-form-item>

			<el-form-item label="分组">
				<el-select size="small" @change="getInitData" filterable v-model="popoverForm.class_group" placeholder="请选择">
					<el-option v-for="opt in initData.class_group"
						:label="opt.name" :key="opt.id" :value="opt.id">
					</el-option>
				</el-select>
			</el-form-item>

			<el-form-item label="班号">
				<el-select size="small" :disabled="initLoading"
					filterable v-model="popoverForm.classes" placeholder="请选择">
					<el-option v-for="opt in initData.classes" :label="opt.name" :key="opt.id" :value="opt.id"></el-option>
				</el-select>
			</el-form-item>

			<el-form-item label=" ">
				<el-button type="primary" size="small" @click="addContrastRow">
					确定
				</el-button>
				<el-button size="small" @click="show_add_contrast = false;">
					取消
				</el-button>
			</el-form-item>
		</el-form>
	</el-popover>
</div>
<script type="text/javascript">
var main = new Vue({
	el:"#main",
	data:{
		show_add_track:false,
		show_add_contrast:false,
		initLoading:false,
		initData:{
			class_stage:[],
			class_type:[],
			class_group:[]
		},
		trackTableData:[],
		contrastTableData:[],
		situationTableData:{
			table:[],
			loading:true,
		},
		weekLossTableData:[],
		todayLossDetailsTable:{
			table:[],
			loading:true,
		},
		todayLossTableData:{
			date:"{{date('Y-m-d')}}",
			table:[],
			pageSize:10,
			pageNumber:1,
			total:0,
			loading:true,
		},
		popoverForm:{
			class_type:"",class_stage:"",campuses:"",year:"",class_group:"",year:"",classes:""
		},
	},
	mounted:function() {
		this.getInitData();
		this.getSituationTableData();
		this.getWeekLossTableData();
		this.getTodayLossTableData();
	},
	watch: {
		"popoverForm.class_stage": {
			deep: true,immediate: true,
			handler() {
				this.popoverForm.class_group = "";
				this.popoverForm.classes = "";
		    }
		},
		"popoverForm.campuses": {
			deep: true,immediate: true,
			handler() {
				this.popoverForm.class_group = "";
				this.popoverForm.classes = "";
		    }
		},
		"popoverForm.class_group": {
			deep: true,immediate: true,
			handler() {
				this.popoverForm.classes = "";
		    }
		},
		"popoverForm.year": {
			deep: true,immediate: true,
			handler() {
				this.popoverForm.classes = "";
		    }
		}
	},
	methods:{
		// start of 处理班级追踪和班级对比两个表格
		getInitData() {
			this.initLoading = true;
			var param = this.popoverForm;
			$.get("./report_dashboard/index/get_init_data",param,function(res) {
				main.initData =	res.data;
				main.initLoading = false;
				main.trackTableData = res.data.checked_track;
				main.contrastTableData = res.data.checked_contrast;
			})
		},
		addTrackRow() {
			if(this.popoverForm.classes == ""){
				this.$notify.error({title:"Error",message:"请选择班号"});
				return false;
			}
			for(i in this.trackTableData){
				if(this.popoverForm.classes == this.trackTableData[i].id){
					this.$notify.error({title:"Error",message:"该班级已在列表内"});
					return false;
				}
			}
			this.mkRow("Track");
			this.show_add_track = false;
		},
		addContrastRow() {
			if(this.popoverForm.classes == ""){
				this.$notify.error({title:"Error",message:"请选择班号"});
				return false;
			}
			for(i in this.contrastTableData){
				if(this.popoverForm.classes == this.contrastTableData[i].id){
					this.$notify.error({title:"Error",message:"该班级已在列表内"});
					return false;
				}
			}
			this.mkRow("Contrast");
			this.show_add_contrast = false;
		},
		mkRow(type) {
			var param = {
				id:this.popoverForm.classes
			}
			if(type == "Track"){
				param.field = "track_ids";
			}else{
				param.field = "contrast_ids";
			}
			$.get("./report_dashboard/index/mk_row",param,function(res) {
				if(res.code == 1){
					main.popoverForm = {
						class_type:"",class_stage:"",campuses:"",
						year:"",class_group:"",year:"",classes:""
					}
					if(type == "Track"){
						main.trackTableData.push(res.data);
					}else{
						main.contrastTableData.push(res.data);
					}
				}
			});
		},
		delRow(row,type) {
			var param = {
				id:row.id
			}
			switch (type) {
				case "Track":
					param.field = "track_ids";
					break;
				case "Contrast":
					param.field = "contrast_ids";
					break;
			}
			$.get("./report_dashboard/index/del_row",param,function(res) {
				if(res.code == 1){
					main.getInitData();
				}else{
					main.$notify.error({title:"Error",message:res.msg});
				}
			});
		},
		toTrack() {
			if(this.trackTableData.length <= 0){
				this.$notify.error({title:"Error",message:"请先添加数据"});
				return false;
			}
			var ids = [];
			for(i in this.trackTableData){
				ids.push(this.trackTableData[i].id)
			}
			var param = ids.join(",");
			var url = "report_dashboard/track/ids/"+param;
			window.open(url);
		},
		toContrast() {
			if(this.contrastTableData.length <= 0){
				this.$notify.error({title:"Error",message:"请先添加数据"});
				return false;
			}
			var ids = [];
			for(i in this.contrastTableData){
				ids.push(this.contrastTableData[i].id)
			}
			ids = ids.sort();
			var param = ids.join(",");
			var url = "report_dashboard/contrast/ids/"+param;
			window.open(url);
		},
		// end of 处理班级追踪和班级对比两个表格

		// start of 班级情况
		getSituationTableData() {
			this.situationTableData.loading = true;
			$.get("./report_dashboard/index/get_situation_table",function(res) {
				if(res.code == 1){
					main.situationTableData.table = res.data;
				}else{
					main.$notify.error({title:"Error",message:"获取‘班级情况’数据失败"})
				}
				main.situationTableData.loading = false;
			});
		},
		situationRowspan({row,column,rowIndex,columnIndex}) {
			if(this.situationTableData.loading === false) {
				if (columnIndex === 1 && rowIndex === 2) {
					return {rowspan:1,colspan:2}
				}
				if (columnIndex === 2 && rowIndex === 2) {
					return {rowspan:1,colspan:0}
				}
				if (columnIndex === 1 && rowIndex === 3) {
					return {rowspan:1,colspan:2}
				}
				if (columnIndex === 2 && rowIndex === 3) {
					return {rowspan:1,colspan:0}
				}
				if (columnIndex === 1 && rowIndex === 4) {
					return {rowspan:1,colspan:2}
				}
				if (columnIndex === 2 && rowIndex === 4) {
					return {rowspan:1,colspan:0}
				}
				if (columnIndex === 1 && rowIndex === 5) {
					return {rowspan:1,colspan:2}
				}
				if (columnIndex === 2 && rowIndex === 5) {
					return {rowspan:1,colspan:0}
				}
				return {rowspan:1,colspan:1}
			}
		},
		// end of 班级情况

		// start of 周流失情况
		getWeekLossTableData() {
			$.get("./report_dashboard/index/get_week_lost_table",function(res) {
				if(res.code == 1){
					main.weekLossTableData = res.data;
				}else{
					main.$notify.error({title:"Error",message:"获取‘周流失情况’数据失败"})
				}
			});
		},
		// end of 周流失情况

		// start of 今日流失情况
		pageSizeChange(val) {
			this.todayLossTableData.pageSize = val;
			this.todayLossTableData.pageNumber = 1;
			this.getTodayLossTableData();
		},
		curPageChange(val) {
			this.todayLossTableData.pageNumber = val;
			this.getTodayLossTableData();
		},
		getTodayLossTableData() {
			this.todayLossTableData.loading = true;
			var param = {
				date:this.todayLossTableData.date,
				pageSize:this.todayLossTableData.pageSize,
				pageNumber:this.todayLossTableData.pageNumber
			}
			$.get("./report_dashboard/index/get_today_lost_table",param,function(res) {
				if(res.code == 1){
					main.todayLossTableData.table = res.data.table;
					main.todayLossTableData.total = res.data.total;
					main.todayLossTableData.loading = false;
				}else{
					main.$notify.error({title:"Error",message:"获取‘今日流失情况’数据失败"})
				}
			});
		},
		showTodayLoss(row) {
			this.todayLossDetailsTable.loading = true;
			$.get("./report_dashboard/index/get_today_lost_details",row,function(res) {
				if(res.code == 1){
					main.todayLossDetailsTable.loading = false;
					main.todayLossDetailsTable.table = res.data;
				}else{
					main.$notify.error({title:"Error",message:"获取“"+row.squad_name+"流失详情”数据失败"})
				}
			});
		},
		handlePickerChange() {
			this.getTodayLossTableData();
		},
		// end of 今日流失情况
	}
})
</script>
